import React, {useState} from 'react';
import {Input, Tree} from 'tdesign-react';
import {SearchOutlined, PlusCircleOutlined} from '@ant-design/icons';
import type {TreeProps} from 'tdesign-react';

export default (props) => {
    const {treeData, keys, setTreeCode} = props
    const [filterText, setFilterText] = useState('');
    const filterByText2: TreeProps['filter'] = (node) => {
        return (node.data.orgName as string).indexOf(filterText) >= 0
    };
    const handleClick: TreeProps['onClick'] = ({node}) => {
        setTreeCode([node.data.orgPath])
    };
    const append = (node, e) => {
        e.stopPropagation();
        console.log(node)
    }
    const renderOperations = (node) => (
        <PlusCircleOutlined style={{fontSize: '16px'}}
                            onClick={(e) => append(node, e)} />
    );
    return (
        <>
            <Input prefixIcon={<SearchOutlined />}
                   value={filterText} onChange={setFilterText} />
            <Tree
                data={treeData}
                allowFoldNodeOnFilter={true}
                expandOnClickNode
                activable
                hover
                line
                icon
                expandLevel={1}
                filter={filterText ? filterByText2 : null}
                keys={keys}
                onClick={handleClick}
                operations={renderOperations}
            />
        </>
    );
};
